body{
    background-color: #4a4a4a;
    width: 100%;
    height: 100%;
    position: relative;
}
/*.dramatic_loading_img{
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #4a4a4a;
    border-radius:25px;
}*/
section{
    display: none;
}
/*登陆*/
.login_main{
    width: 323px;
    height: 200px;
    margin: 315px auto 0;
    text-align: center;
}
.welcome{
    font-size: 25px;
    text-align: center;
    color:#eee;
}
.username{
    margin-top: 35px;
    margin-bottom: 25px;
    padding-left:15px;
    width: 100%;
    height: 48px;
    background-color: #888;
    font-size: 18px;
    border:0;
    border-radius:5px;
}
.login_btn{
    cursor: pointer;
}

/*选择词汇量*/
.selectVocabulary_main{
    width: 300px;
    margin: auto;
    color:#eee;
    margin-top: 200px;

}
.selectVocabulary_title{
    padding-left: 10px;
    line-height: 50px;
    height: 50px;
    font-size: 25px;
    text-align: center;
    margin-bottom: 50px;
}
/*选词汇量的下拉菜单*/
.selectVocabulary_dp{
    font-size: 20px;
    cursor:pointer;
    height: 100px;
}
.selectVocabulary_dp_ti{
    height: 40px;
    line-height: 40px;
    border:1px solid #ddd;
    padding-left: 30px;
    border-radius: 5px;
}
.selected_vocabulary{
    display: inline-block;
}
.select_vocabulary_arrow{
    float:right;
    margin-top: 16px;
    margin-right: 10px;
    border: 10px solid #4a4a4a;
    border-top-color: #ddd;
    width: 0;
    height: 0;
}
.selectVocabulary_ul{
    display: none;
    list-style: none;
    padding:0;
    border: 1px solid #ddd;
    border-top:0;
    margin-bottom: 0;
    z-index: 1;
    position: relative;
    background-color: #666;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.selectVocabulary_ul li{
    height: 40px;
    line-height: 40px;
    padding-left:30px;
}


.selectVocabulary_ul li:hover{
    background-color: #4a4a4a;
}
.selectVocabulary_btn_zone{
    text-align: center;
}
.submit_vocabulary_btn{
   
    width: 80px;
}


/*阅读页面*/
#pageReading{
    min-width: 900px;
}
.center_wrapper,.center,.slide,.catalogue_bookmark_wrap{
    min-height:705px;
}
/*中间包含箭头，页面内容区域*/
.center_wrapper{
    width: 780px;
    position: relative;
}
/*页面两边的翻页区域*/
.arrow_area{
    display:inline-block;
    width: 65px;
    height: 100%;
    position: absolute;
    top:0px;
    text-align: center;
    padding-top: 300px;
    font-size: 40px;
    font-weight: bolder;
    
}
.turn_page{
    width: 100%;
    height: 80px;
    line-height: 80px;
    cursor: pointer;
}
.turn_page:hover{
    background-color: #555;
}
/*中间显示章节名，文章，页面情况部分*/
.center{
    background-color: #fefef2;
    width: 650px;
    display: inline-block;
    margin-left: 65px;
    padding-top: 20px;
    
}
.book_chapter_tip_zone{ 
    height:50px;
    line-height: 40px;
    font-size: 14px;
    color:#ccc;
    padding:0 50px;

}
.book_tip,.chapter_tip{
    display: inline-block;
    width: 45%;
    white-space:nowrap; 
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
    overflow: hidden; 
}
.center div.book_tip{
    text-align: left;
    margin-right: 9%;
}
.center div.chapter_tip{
    text-align: right;
}
.center div.page_cont{
    line-height:34px;    
    height: 584px;
    font-family:"HelveticaNeue-Light";
    color:#4a4a4a;
    font-size:20px;
    padding:0 50px;
 }
 .center div.page_status{
    position:fixed;
    bottom:10px;
    left:0;
    right:0;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    color: #ddd;
 }
 .dot_word::selection, .p_a_r_a::selection{
    background-color : #ffdd33;
}

/*每个页面文章中以'\n'为分割符,用div.p_a_r_a包装*/
.p_a_r_a {
    padding-bottom: 10px;
    min-height: 44px;
}

/*每个单词区域，包括可能有的红点，简短翻译*/
.word_area{
    display: inline-block;
    position: relative;
}
/*关键词*/
.key_word{
    color:#428BCA;
}
/*标小红点单词*/
.dot_word{
    border-radius: 5px;
}
/*单词区域点击时的渐变色，由易变难.word_difficult，由难变易.word_easy*/
.word_difficult{
    animation: wordDifficult 3s;
}
.word_easy{
    animation: wordEasy 3s;
}
/*点击单词时背景颜色淡入淡出*/
@keyframes wordDifficult
{
    0%  { background-color: none;}
    50% { background-color: #FFBAB2;}
    100% { background-color: none;}
}
@-moz-keyframes wordDifficult /* Firefox */
{
    0%  { background-color: none;}
    50% { background-color: #FFBAB2;}
    100% { background-color: none;}
}

@-webkit-keyframes wordDifficult /* Safari 和 Chrome */
{
    0%  { background-color: none;}
    50% { background-color: #FFBAB2;}
    100% { background-color: none;}
}
@keyframes wordEasy
{
    0%  { background-color: none;}
    50% { background-color: #B0FFA6;}
    100% { background-color: none;}
}
@-moz-keyframes wordEasy /* Firefox */
{
    0%  { background-color: none;}
    50% { background-color: #B0FFA6;}
    100% { background-color: none;}
}

@-webkit-keyframes wordEasy /* Safari 和 Chrome */
{
    0%  { background-color: none;}
    50% { background-color: #B0FFA6;}
    100% { background-color: none;}
}
.trans{
    position: absolute;
    top:0px;
    text-align: center;
    font-size: 10px;
    color:#aaa;
    line-height: 5px;      
    display: none;
}

.dot{
    position: absolute;
    bottom: 0;
    display:inline-block;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: #FFBABA;

}
.trans_area{
    position:absolute;
    /*pointer-events:auto;*/
    display: none;
    width: 200px;
    min-height: 100px;
    background-color: #fefef2;
    color:black;
    border-radius: 10px;
    border: 3px #eee solid;
}
.trans_area>div{
    padding:10px 20px;
}
.trans_area span.lv_btn{   
    display: inline-block;
    width: 45px;
    height: 26px;
    line-height: 26px;   
    text-align: center;
    font-size: 8px;
    cursor: pointer;
    background-color: #FDFDFD;
    color:black;
}
.trans_area span.h_a_r_d{
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    margin-left: -4px;
    
}

.trans_area span.e_a_s_y{
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
    
}
.trans_area span.choose_hard{
    background-color: #ED7471;
    color:white;
}
.trans_area span.choose_easy{
    background-color: #B0FFA6;
    color:white;
}

/*章节之间的单词显示模块*/
.chapter_words_area{
    width: 800px;
    height: 610px;
    position: absolute;
    background-color: #fefef2;
    z-index: 10;
    color:#4a4a4a;
    text-align: center;
    display: none;
}
.chapter_words_chapter_name{
    padding: 45px 0 15px;
    font-size: 22px;
}
.chapter_words_close{
    position: absolute;
    top:0px;
    right:0px;
    font-size: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.chapter_words_tip{
    font-size: 17px;
}
.chapter_words_main{
    position: relative;
    height: 350px;
}

.chapter_words_arrow_area{
    display: inline-block;
    position: absolute;
    top:0;
    width: 100px;
    height: 100%;
    padding-top: 150px;
}
.chapter_words_left_arrow_area{
    left:0;
}
.chapter_words_right_arrow_area{
    right:0;   
}
.chapter_words_turn_page{
    height: 50px;
    line-height: 50px;
    cursor: pointer;
}
/*展示章节单词*/
.chapter_words_main_center{
    width: 590px;
    height: 100%;
    margin: auto;
}
.chapter_words_part{
    width: 100%;
    height: 100%;
}
.chapter_words_single{
    display: inline-block;
    margin: 15px 20px;
    height: 40px;
    min-width: 150px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 8px;
    border-radius: 20px;
    cursor: pointer;
}
.chapter_words_difficult{
    background-color: #FFBAB2;
}
.chapter_words_easy{
    background-color: #B0FFA6;
}

.chapter_words_bottom{
    text-align: right;
    padding:49px 85px 0 0;
}
.chapter_words_next_chapter_btn{
    cursor: pointer;
}

.chapter_words_status{
    position: absolute;
    display: none;
    z-index: 20;
}
.chapter_words_add_word{
    color: #B0FFA6;
}
.chapter_words_remove_word{
    color: #FFBAB2;
}

 /*侧边栏*/
 .slide{
    position: fixed;
    top:0;
    width: 70px;
    background-color: #4a4a4a;
    z-index: 3;
 }
 .pageReading_slide_btn_area{
    margin: 30px 22px 0;
 }
 .slide img{
    cursor: pointer;
    display: block;
    height: 25px;
    width: 25px;
    margin-bottom: 15px;

 }
 
 /*侧滑出的目录书签区域*/
 .catalogue_bookmark_wrap{
    position: fixed;
    width: 300px;
    left: -230px;
    padding: 49px 0 0;
    background-color: #fefef2;
    z-index: 2;
    overflow: auto;
    display: none;
    
 }
 .catalogue_bookmark_nav{
    padding: 0 23px;
 }
 .catalogue_bookmark_btn{
    display: inline-block;
    width: 116px;
    height: 28px;
    line-height: 28px;  
    text-align: center;
    color: #bbb;
    font-size: 15px;
    border: 1px solid #666;
    cursor: pointer;
 }
 .catalogue_btn{
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
 }
 .bookmark_btn{
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    margin-left: -4px;
    border-left:0;
 }
 .catalogue_bookmark_btn.hover{
    background-color: #666;
 }
 .ct_bk{
    padding-top: 30px;
    font-size: 14px;
    color: #4a4a4a;
 }
.catalogue_area{
    
}
.catalogue_line{
    line-height: 35px;
    padding: 0 23px;
    cursor: pointer;
    white-space:nowrap; 
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
    overflow: hidden; 
}
.catalogue_line:hover{
    background-color: #ccc;
}


 /*右边显示词汇数区域*/
 .right{
    position: fixed;
    right:0;
    top:0;
    padding:25px 53px 0 0;
 }
 .word_count{
    color: #ababab;
 }

 /*pageReading页面的按键操作提示*/
 .pageReading_option_tip{
    position: fixed;
    right: 50px;
    bottom: 117px;
    text-align: right;
    font-size: 16px;
    color:#acaca8;
 }
 .pageReading_option_tip_main{
    padding-bottom: 20px;
    display: none;
 }
 .pageReading_option_tip_main div{
    height: 35px;
    line-height: 35px;
    width: 180px;
    text-align: center;
 }
 .option_word{
    color: #6e6f71;
 }
.pagereading_desc_circle{
    cursor: pointer;
}




/*选书*/


/*选书界面头部，包含按钮，用户词汇量显示和"BOOKSHELF"字样部分*/
.chooseBook_top{
    height: 150px;
    width: 100%;
}
/*选书界面包含按钮和用户词汇量显示部分*/
.chooseBook_top_up{
    background-color: #000;
    height: 60px;
    padding: 10px 0;
    color:#999;
    margin-bottom: 50px;
}
.chooseBook_top_up_left{
    padding-left: 3%;
    display: inline-block;
    width: 80%;

}
.chooseBook_top_up_right{
    width: 18%;
    text-align: right;
    padding-right:3%;
    display: inline-block;
}

.chooseBook_top_btn,.chooseBook_logo{
    display: inline-block;
    width: 85px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    margin-right: 20px;
    cursor: pointer;
}
.chooseBook_top_btn:hover,.chooseBook_top_btn_hover{
    border-bottom:1px solid #fff;
    color: #fff;
}
.chooseBook_user_word_size{
 
}


/*选书界面放书部分*/
.book_stack{
    min-height: 450px;
    max-width: 970px;
    min-width: 500px;
    margin: auto;
    padding-right: 34px;
    padding-bottom: 50px;
}
.book_block{ 
    width: 120px;
    height: 190px;
    display:inline-block;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #fefef2;
    padding: 10px 10px 0;
    text-align: center;
    cursor: pointer;
    margin-left: 34px;
    margin-top: 26px; 
}
.book_block:hover{
    opacity: 0.7;
}
.upload_book_form{
    display: inline-block;
    vertical-align: middle;
}
.add_book{
    border:1px solid #aaa;
    background-color: #666;
    font-size: 40px;
    font-weight: 100;
    text-align: center;
    line-height: 180px;
    color:white;
    padding:0;

}
.chooseBook_bottom{
    background-color: black;
    min-height: 200px;
    padding:20px 50px; 
}
.chooseBook_bottom_main{
    font-size: 18px;
    color:#aaa;
    max-width: 850px;
    margin: auto;
}
/*生词本*/

.vocabularyBook_left_top{
    padding-left: 22px;
    padding-top: 30px;
}
.vocabularyBook_main{
    width: 650px;
    min-height: 705px;
    background-color: #fefef2;
    position: relative;

}
.vocabularyBook_tab_area{
    padding: 30px 60px 50px;
    font-size: 28px;
}
.vocabularyBook_tab{
    display: inline-block;
    width: 120px;
    height: 45px;
    padding-bottom: 10px;
    text-align: center;
    cursor: pointer;
}
.vocabularyBook_hr{
    width: 120px;
    border:2px solid #aaa;
    margin: 0;
    position: relative;
}
.word_list{
    font-size: 20px;
    height: 490px;
    padding:0 50px;
    
}
.word_item{
    border-bottom:1px #eee solid;
    height: 35px;
    padding-bottom: 5px;
    margin-bottom: 30px;
    padding-left: 50px;
}
.word_item span{
    display: inline-block;
    width: 200px;
}
.new_words_arrow_area{
    display: inline-block;
    position: absolute;
    top:0;
    width: 50px;
    padding-top: 350px;
    text-align: center;
}
.new_words_left_arrow_area{
    left:0;
}
.new_words_right_arrow_area{
    right:0;
}
.new_words_turn_page{
    height: 50px;
    width: 100%;
    line-height: 50px;
    cursor: pointer;
    position: absolute;
}
.learning_arrow_zone{
    padding: 20px 30px 50px;
    text-align: right;
}
.learning_arrow_zone img{
    cursor: pointer;
}

/*顶部固定区域用于错误等提示*/
.tip_right {
    background-color: #12AA33;
}

.tip_wrong {
    background-color: #aa2233;
}

.top_tip {
    top: 0px;
    position: fixed;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    z-index: 999;
    display: none;
}
input[type="file"]{
   width: 120px;
   height: 180px;
   display: none;

}
.upload_book_frame{
    display: none;
    border:1px solid #aaa;
    background-color: #666;
}
.file_up_submit_btn{
    margin:30px auto;
}






